import {
  Row,
  Col,
  Flex,
  Typography,
  Button,
  Form,
  Input,
  Divider,
  Radio,
  Select,
  Modal,
  TreeSelect,
  Transfer,
  Table,
  Cascader,
  Tree,
  message
} from 'antd'
import React, { useEffect, useState } from 'react'
import { regionData } from '../utils/region'
import {useNavigate, useParams} from 'react-router-dom'
import { adminActivatyInfo } from '../service/activaty'
import { shopList } from '../service/shop'
import MyDatePicker from '../components/MyDatePicker'
import { DeleteOutlined, PlusSquareOutlined } from '@ant-design/icons'
import {getTagTypeList, addTag, getTagByName} from "../service/tag";

export default function TagAdd() {
    const navigate = useNavigate()
  const { id } = useParams() // 获取路由参数中的id
  const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
  const [form] = Form.useForm()

  // 保存选择的日期
  const [selectedDateString, setSelectedDateString] = useState(null)

    const [renameForm] = Form.useForm();
    // const [treeData, setTreeData] = useState([]);


  // 穿梭机数据
  const [mockData, setMockData] = useState([
    {
      key: '1',
      title: '中关村1店',
      chosen: false
    },
    {
      key: '2',
      title: '中关村2店',
      chosen: true
    },
    {
      key: '3',
      title: '中关村3店',
      chosen: false
    }
  ])

  // 标签分组树形数据，初始化为空数组
  const [treeData2, setTreeData2] = useState([])
  // 存储标签类型ID与名称的映射关系
  const [tagTypeMap, setTagTypeMap] = useState({})

  // 树形数据
  const treeData = [
    {
      title: (
        <Select options={[{ value: '且', label: '且' }]} defaultValue="且" />
      ),
      key: '0-0',
      children: [
        {
          title: (
            <Select
              options={[{ value: '或', label: '或' }]}
              defaultValue="或"
            />
          ),
          key: '0-0-0',
          isLeaf: true,
          children: [
            {
              title: (
                <>
                  <Select
                    options={[{ value: '0', label: '行为' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '对象' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '数值' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '等于' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Input type="number" style={{ width: 70 }} value={1} />
                </>
              ),
              key: '0-0-0-0'
            },
            {
              title: (
                <>
                  <Select
                    options={[{ value: '0', label: '行为' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '对象' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '数值' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '等于' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Input
                    type="number"
                    style={{ width: 70, marginRight: 10 }}
                    value={1}
                  />
                  <DeleteOutlined style={{ marginRight: 10, color: '#999' }} />
                  <PlusSquareOutlined
                    style={{ marginRight: 10, color: '#999' }}
                  />
                </>
              ),
              key: '0-0-0-1'
            }
          ]
        },
        {
          title: (
            <>
              <Select
                options={[{ value: '0', label: '行为' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '对象' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '数值' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '等于' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Input
                type="number"
                style={{ width: 70, marginRight: 10 }}
                value={1}
              />
              <DeleteOutlined style={{ marginRight: 10, color: '#999' }} />
              <PlusSquareOutlined style={{ marginRight: 10, color: '#999' }} />
            </>
          ),
          key: '0-0-1',
          isLeaf: true
        },
        {
          title: (
            <>
              <Select
                options={[{ value: '0', label: '行为' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '对象' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '数值' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '等于' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Input
                type="number"
                style={{ width: 70, marginRight: 10 }}
                value={1}
              />
              <DeleteOutlined style={{ marginRight: 10, color: '#999' }} />
              <PlusSquareOutlined style={{ marginRight: 10, color: '#999' }} />
            </>
          ),
          key: '0-0-2',
          isLeaf: true
        },
        {
          title: (
            <PlusSquareOutlined style={{ marginRight: 10, color: '#999' }} />
          ),
          key: '0-0-3',
          isLeaf: true
        }
      ]
    }
  ]
  
  // 构建标签类型ID与名称的映射
  const buildTagTypeMap = (nodes) => {
    if (!nodes || !Array.isArray(nodes)) return {};
    
    let map = {};
    nodes.forEach(node => {
      if (node && node.id && (node.typeName || node.name)) {
        map[node.id.toString()] = node.typeName || node.name;
      }
      if (node.child && Array.isArray(node.child)) {
        const childMap = buildTagTypeMap(node.child);
        map = { ...map, ...childMap };
      }
    });
    return map;
  };
  
  useEffect(() => {
    // 获取所有标签类型
    ;(async () => {
      try {
        // 根据TagList.jsx中的实现，getTagTypeList不需要参数，直接调用
        const res = await getTagTypeList()
        console.log('获取标签类型返回数据:', res);
        
        // 标签类型数据，默认为空数组
        let tagTypeData = [];
        
        // 检查响应是否成功，并且有数据
        if (res && res.success && res.data) {
          // 根据TagList.jsx的实现，res.data直接就是标签类型数组
          tagTypeData = res.data;
          console.log('获取到的标签类型数据:', tagTypeData);
          
          // 构建标签类型ID与名称的映射
          const typeMap = buildTagTypeMap(tagTypeData);
          setTagTypeMap(typeMap);
          console.log('标签类型映射:', typeMap);
        } else {
          console.warn('标签类型数据为空或响应不成功');
        }
        
        // 确保tagTypeData是数组
        if (!Array.isArray(tagTypeData)) {
          console.warn('tagTypeData不是数组，转换为空数组');
          tagTypeData = [];
        }
        
        // 设置穿梭机数据
        if (tagTypeData.length > 0) {
          const arr = tagTypeData.map((item) => {
            return {
              key: item.id,
              title: item.typeName || item.name || `标签${item.id}`,
              chosen: false
            }
          })
          setMockData(arr);
        }
        
        // 递归转换数据结构为TreeSelect所需的格式
        const convertToTreeSelectFormat = (nodes) => {
          if (!nodes || !Array.isArray(nodes)) return [];
          
          return nodes.filter(node => node && node.id) // 过滤无效节点
            .map(node => ({
              title: node.typeName || node.name || `未命名标签组`,
              value: node.id.toString(),
              children: node.child && Array.isArray(node.child) && node.child.length > 0 
                ? convertToTreeSelectFormat(node.child) 
                : undefined
            }));
        };
        
        // 如果有实际数据，转换后使用；否则使用默认测试数据
        let finalTreeData = [];
        if (tagTypeData.length > 0) {
          finalTreeData = convertToTreeSelectFormat(tagTypeData);
          console.log('转换后的树形数据:', finalTreeData);
        } else {
          // 使用默认测试数据，确保下拉框能显示内容
          finalTreeData = [
            {
              title: '测试标签组1',
              value: 'test_1',
              children: [
                { title: '测试子标签1-1', value: 'test_1_1' },
                { title: '测试子标签1-2', value: 'test_1_2' }
              ]
            },
            {
              title: '测试标签组2',
              value: 'test_2',
              children: [
                { title: '测试子标签2-1', value: 'test_2_1' }
              ]
            }
          ];
          console.log('使用默认测试数据:', finalTreeData);
        }
        
        // 无论如何都设置treeData2，确保下拉框有数据显示
        setTreeData2(finalTreeData);
      } catch (error) {
        console.error('获取标签类型失败:', error);
        // 出错时使用默认测试数据
        const defaultData = [
          {
            title: '测试标签组1',
            value: 'test_1',
            children: [
              { title: '测试子标签1-1', value: 'test_1_1' },
              { title: '测试子标签1-2', value: 'test_1_2' }
            ]
          },
          {
            title: '测试标签组2',
            value: 'test_2',
            children: [
              { title: '测试子标签2-1', value: 'test_2_1' }
            ]
          }
        ];
        setTreeData2(defaultData);
        console.log('捕获异常，使用默认测试数据:', defaultData);
      }
    })()
    
    if (isEditing) {
      ;(async () => {
        const res = await adminActivatyInfo(id)
        console.log(res)
        // 给表单赋值
        form.setFieldsValue(res.data)
      })()
    } else {
    }
  }, [form, id, isEditing])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>新建标签</Typography.Title>
          </Flex>
        </Col>
      </Row>
      <Form
        labelCol={{
          span: 2
        }}
        wrapperCol={{
          span: 12
        }}
        style={{ width: '100%', marginTop: 30 }}
        form={form}
        onFinish={async (values) => {
          try {
            // 获取选择的标签分组ID
            const selectedTypeId = values.tagTypeId;
            console.log('选择的标签类型ID:', selectedTypeId);
            
            // 确保tag_parent_id总是有值，直接使用选择的标签分组ID
            // 这样即使getTagByName调用失败，也能保证有一个有效的父ID
            let tagParentId = selectedTypeId;
            
            // 尝试通过getTagByName查询对应标签库ID，但不影响最终的tag_parent_id
            if (selectedTypeId) {
              try {
                const selectedTypeName = tagTypeMap[selectedTypeId] || selectedTypeId;
                console.log('尝试根据名称查询标签库:', selectedTypeName);
                
                // const tagRes = await getTagByName(selectedTypeName);
                console.log('查询标签库返回结果:', tagRes);
                
                if (tagRes && tagRes.success && tagRes.data && tagRes.data.id) {
                  console.log('找到对应的标签库ID:', tagRes.data.id, '将使用此ID作为tag_parent_id');
                  tagParentId = tagRes.data.id;
                } else {
                  console.warn('未找到对应的标签库信息，使用原标签类型ID作为tag_parent_id');
                }
              } catch (tagError) {
                console.error('查询标签库失败，继续使用选择的标签类型ID:', tagError);
              }
            }
            
            // 准备请求参数 - 调整字段名称以匹配后端期望格式
            const params = {
              tagType: selectedTypeId,
              tagName: values.tagName,
              tagDesc: values.describes,
              status: values.tagStatus === 1 ? 0 : 1,
              tagParentId: tagParentId // 确保总是有值
            };
            
            console.log('最终提交的标签数据:', params);
            console.log('API调用: /admin/basic/tag/addTag');
            
            // 调用addTag方法
            const res = await addTag(params);
            
            if (res.success) {
              // 请求成功处理
              message.success('标签添加成功！');
              navigate('/admin/tag/list'); // 添加成功后跳转到标签列表页
            } else {
              // 请求失败处理
              message.error(res.message || '添加标签失败');
            }
          } catch (error) {
            console.error('添加标签时发生错误:', error);
            message.error('添加标签时发生错误，请稍后重试');
          }
        }}>
        <Row className="container" style={{ marginBottom: 0, marginTop: 0 }}>
          <Col span={24}>
            <Typography.Title level={4}>基本信息</Typography.Title>
          </Col>
          <Col span={24}>
            <Form.Item label="标签分组" name="tagTypeId" rules={[{ required: true, message: '请选择标签分组' }]}>
              <TreeSelect
                style={{
                  width: 300
                }}
                dropdownStyle={{
                  maxHeight: 400,
                  overflow: 'auto'
                }}
                treeData={treeData2}
                placeholder="请选择分组"
                treeDefaultExpandAll
                fieldNames={{ label: 'title', value: 'value', children: 'children' }}
              />
            </Form.Item>
            <Form.Item label="标签名称" name="tagName" rules={[{ required: true, message: '请输入标签名称' }]}>
              <Input placeholder="请输入标签名称" style={{ width: 300 }} />
            </Form.Item>

            <Form.Item label="内容描述" name="describes">
              <Input.TextArea
                style={{ height: 120, width: 400, resize: 'none' }}
              />
            </Form.Item>
            <Form.Item label="标签状态" name="tagStatus" initialValue={1}>
              <Radio.Group>
                <Radio value={1}>开启</Radio>
                <Radio value={2}>关闭</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col>
            <Divider style={{ margin: 0 }} />
          </Col>
        </Row>

              <Form.Item label=" " colon={false} name="beizhu">
                <Button type="primary" htmlType="submit">
                  发布
                </Button>
              </Form.Item>
      </Form>
    </>
  )
}
